<template>
	<div class="haitgh">
		<el-row :gutter="20" v-permission="['getStatistics1,GET']">
			<template v-if="panels.length == 0">
				<el-col :span="6" v-for="i in 4" :key="i">
					<el-skeleton style="width: 100%;" animated loading>
						<div>
							<!-- bug-->
							<template>
								<el-card shadow="hover" class="border-0">
									<template #header>
										<div class="flex justify-between">
											<el-skeleton-item variant="text" style="width: 50%" />
											<el-skeleton-item variant="text" style="width: 10%" />
										</div>
									</template>
									<el-skeleton-item variant="h3" style="width: 80%" />
									<el-divider />
									<div class="flex justify-between text-sm ">
										<el-skeleton-item variant="text" style="width: 50%" />
										<el-skeleton-item variant="text" style="width: 10%" />
									</div>
								</el-card>
							</template>
						</div>
					</el-skeleton>
				</el-col>
			</template>

			<el-col :span="6" :offset="0" v-for="(item,index) in panels" :key="index">
				<el-card shadow="hover" class="border-0">
					<template #header>
						<div class="flex justify-between">
							<span class="text-sm">{{ item.title }}</span>
							<el-tag :type="item.unitColor" effect="plain">
								{{ item.unit }}
							</el-tag>
						</div>
					</template>
					<span class="text-3xl font-bold text-gray-500">
						<CountTo :value="item.value" />
					</span>
					<el-divider />
					<div class="flex justify-between text-sm text-gray-500">
						<span>{{ item.subTitle }}</span>
						<span>{{ item.subValue }}</span>
					</div>
				</el-card>
			</el-col>
		</el-row>
		
		<indexNavs/>
		
		<el-row :gutter="20">
			<el-col :span="12" :offset="0">
				<indexChart v-permission="['getStatistics3,GET']" />
			</el-col>
			<el-col :span="12" :offset="0" v-permission="['getStatistics2,GET']">
				<indexCard title="店铺及商品展示" tip="店铺及商品展示" :btns="goods" class="mb-3" />
				<indexCard title="交易提示" tip="需要立即处理的交易订单" :btns="order" />
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
	import { logout } from '../api/manager';
	import { showModal,toast } from '../composables/util';
	import { useRouter } from 'vue-router';
	import { useStore } from 'vuex';
	
	const router=useRouter()
	const store=useStore()
	
	function handlelogout(){
		showModal("是否要退出登录？").then(res=>{
			logout()
			.finally(()=>{
				store.dispatch("logout")
				router.push("/login")
				toast("退出登录成功")
			})
		})
	}

	import {
		getStatistics1,
		getStatistics2
	} from '~/api/index.js'
	import CountTo from '~/components/CountTo.vue'
	import indexNavs from '~/components/indexNavs.vue'
	import indexChart from '~/components/indexChart.vue'
	import indexCard from '~/components/indexCard.vue'
	import {
		ref
	} from 'vue'

	const panels = ref([])

	getStatistics1()
		.then(res => {
			panels.value = res.panels;
		})
	
	const goods = ref([])
	const order = ref([])
	
	getStatistics2().then(res=>{
		goods.value = res.goods;
		order.value = res.order;
	})
</script>

<style scoped>
	.text-gray-500{
		color: dimgray;
	}
	
	.border-0{
		border:0px;
	}
	.haitgh{
		margin: 20px;
	}
	.mb-3{
		margin-bottom: 10px;
	}
</style>